
import { api } from "@/lib/api";

async function BlogDetail({ searchParams}: { searchParams: { id: string } }) {
    const { id } = await searchParams;
    const res = await fetch(await api(`/api/blogDetail?id=${id}`), {
        cache: "no-store",
    });
    const blogDetail = await res.json();
    return (
        <div className="max-w-2xl mx-auto mt-8 p-6 bg-white dark:bg-zinc-900 rounded-lg shadow-md">
            <h1 className="text-3xl font-bold mb-4">Blog Detail</h1>
            <h2 className="text-xl font-semibold mb-2 text-zinc-800 dark:text-zinc-200">{blogDetail.title}</h2>
            <div className="flex flex-wrap gap-2 mb-4">
                {blogDetail.tags?.map((tag: string, idx: number) => (
                    <span
                        key={idx}
                        className="inline-block bg-zinc-100 dark:bg-zinc-800 text-xs text-zinc-600 dark:text-zinc-300 px-2 py-0.5 rounded"
                    >
                        {tag}
                    </span>
                ))}
                <span className="ml-auto text-xs text-zinc-500">
                    {new Date(blogDetail.createdAt).toLocaleDateString()}
                </span>
            </div>
            <p className="text-base text-zinc-700 dark:text-zinc-300 leading-relaxed whitespace-pre-line">{blogDetail.content}</p>
        </div>
    );
}

export default BlogDetail;